import { globalStyle, style } from '@vanilla-extract/css';
import { vars, Z_INDEX } from '../global.css';

const arrowSize = '1rem';
const padding = '0.8rem';

export const popupStyle = style({
	vars: {
		'--pop-arrow-size': arrowSize,
		'--pop-padding': padding,
	},
	position: 'fixed',
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	flexDirection: 'column',
	zIndex: Z_INDEX.POPUP,
	transition: 'opacity 0.2s',
	opacity: 0,
	borderRadius: vars.layout.smallRadius,
	boxSizing: 'border-box',
	outline: 'none',
	selectors: {
		'&.no-indicator': {
			vars: {
				'--pop-padding': '0',
			},
		},
		'&:before': {
			// content: ' ',
			display: 'block',
			backgroundColor: vars.color.baseBackground,
			position: 'absolute',
			width: 'var(--pop-padding)',
			height: 'var(--pop-padding)',
			border: `1px solid ${vars.color.border}`,
			transform: 'rotate(45deg)',
			boxSizing: 'border-box',
		},
		'&[side]:before': {
			content: ' ',
		},
		'&.active': {
			opacity: 1,
		},
		'&[side=left]': {
			paddingRight: 'var(--pop-padding)',
		},
		'&[side=right]': {
			paddingLeft: 'var(--pop-padding)',
		},
		'&[side=top]': {
			paddingBottom: 'var(--pop-padding)',
		},
		'&[side=bottom]': {
			paddingTop: 'var(--pop-padding)',
		},
		'&[side=left]:before': {
			right: `calc(var(--pop-padding) / 2)`,
			borderLeftColor: 'transparent',
			borderBottomColor: 'transparent',
		},
		'&[side=right]:before': {
			left: `calc(var(--pop-padding) / 2)`,
			borderTopColor: 'transparent',
			borderRightColor: 'transparent',
		},
		'&[side=top]:before': {
			bottom: `calc(var(--pop-padding) / 2)`,
			borderLeftColor: 'transparent',
			borderTopColor: 'transparent',
		},
		'&[side=bottom]:before': {
			top: `calc(var(--pop-padding) / 2)`,
			borderRightColor: 'transparent',
			borderBottomColor: 'transparent',
		},
		'&[align=left]:before': {
			left: 'var(--pop-arrow-size)',
		},
		'&[align=right]:before': {
			right: 'var(--pop-arrow-size)',
		},
		'&[align=top]:before': {
			top: 'var(--pop-arrow-size)',
		},
		'&[align=bottom]:before': {
			bottom: 'var(--pop-arrow-size)',
		},
	},
});

globalStyle(`${popupStyle}>div.panel`, {
	backgroundColor: vars.color.baseBackground,
	boxShadow: `1px 1px 10px ${vars.color.shadow}`,
	borderRadius: vars.layout.smallRadius,
	border: `1px solid ${vars.color.border}`,
	textAlign: 'left',
	padding: '1rem',
	width: 'max-content',
	overflow: 'hidden',
});
globalStyle(`${popupStyle}>div.panel>*`, {
	position: 'relative',
	zIndex: 1,
});

globalStyle(`${popupStyle}.no-h-padding>div.panel`, {
	paddingLeft: '0',
	paddingRight: '0',
});

globalStyle(`${popupStyle}.no-t-padding>div.panel`, {
	paddingTop: '0',
});

globalStyle(`${popupStyle}.no-b-padding>div.panel`, {
	paddingBottom: '0',
});

globalStyle(`${popupStyle}.no-v-padding>div.panel`, {
	paddingTop: '0',
	paddingBottom: '0',
});

globalStyle(`${popupStyle}.no-padding>div.panel`, {
	padding: '0',
});
